<!--
 * @Author: ybf
 * @Date: 2023-02-21 18:39:51
 * @LastEditTime: 2023-02-22 09:36:06
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<!-- @format -->

<template>
    <div class="tbTitle">
        <svg-icon icon-class="list" class="icon"></svg-icon>
        <span>{{ title }}</span>
        <slot></slot>
    </div>
</template>
<script>
export default {
    name: 'tbTitle',
    props: {
        title: {
            type: String,
            default: () => '',
        },
    },
};
</script>
<style scoped lang="scss">
.tbTitle {
    position: relative;
}

.tbTitle span {
    display: inline-block;
    padding: 10px 20px;
    background: var(--title-tb-bgc);
    color: var(--title-tb-color);
    width: 100%;
    border-radius: 3px;
    font-size: 14px;
    text-indent: 10px;
}

.icon {
    position: absolute;
    top: 35%;
    left: 10px;
    color: var(--title-tb-color);
}
</style>
  